<script setup lang="tsx">
import { ElImageViewer } from 'element-plus'
import { computed, ref } from 'vue'

defineOptions({
  name: 'ImageViewer',
})

const props = withDefaults(defineProps<{
  urlList?: string[]
  zIndex?: number
  initialIndex?: number
  infinite?: boolean
  hideOnClickModal?: boolean
  appendToBody?: boolean
  show?: boolean
}>(), {
  urlList: () => [] as string[],
  zIndex: 20241212,
  initialIndex: 0,
  infinite: true,
  hideOnClickModal: false,
  appendToBody: false,
  show: false,
})

const getBindValue = computed(() => {
  const propsData: Record<string, any> = { ...props }
  delete propsData.show
  return propsData
})

const show = ref(props.show)

function close() {
  show.value = false
}
</script>

<template>
  <ElImageViewer v-if="show" v-bind="getBindValue" @close="close" />
</template>
